<template>
  <div class="app-container">
    <div class="header">
      <el-button type="plain" :icon="ArrowLeft" @click="returnPage" class="return-btn">返 回</el-button>
      <el-row type="flex" justify="center" v-if="show"> AIGC 智能体工具箱 </el-row>
    </div>

    <div class="list-container">
      <!-- <el-row>
        <el-button type="primary" :icon="ArrowLeft" @click="returnPage">返 回</el-button>
      </el-row>

      <div class="title1" v-if="show">探索智能体的世界</div> -->

      <div class="list-items">
        <div class="list-item" v-for="item in list" :key="item.id" @click="jumpTo(item)">
          <img :src="item.imgSrc" alt="Item Image" class="item-image" />
          <div class="item-content">
            <svg-icon name="ai" color="#409EFF" class="item-icon" />
            <span class="item-name">
              {{ item.name }}
            </span>
          </div>
          <div class="item-description">{{ item.description }}</div>

          <el-button type="primary" class="jump-btn">去使用</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ArrowLeft, ArrowRight, Delete, Edit, Share } from "@element-plus/icons-vue";

export default {
  name: "IntelligenceList",
  data() {
    const mode = import.meta.env.MODE;
    const isDev = mode === "development";

    return {
      show: true, // 在开发环境下不显示
      // show: isDev ? false : true, // 在开发环境下不显示
      ArrowLeft,
      list: [
        {
          id: 1,
          name: "小智办公",
          description: "小智办公是内部使用的通用AIGC智能体，侧重内容生成式场景问答的咨询助手.",
          imgSrc: new URL(`../../assets/images/xzbg.png`, import.meta.url).href,
          url: "http://10.1.122.163:10010/chat/ReloIv6LfEPmLv2Z",
        },
        {
          id: 2,
          name: "小智数灵",
          description: "小智数灵是一款基于大数据分析和AIGC结合的自动数据图表生成，问答式数据查询工具.",
          imgSrc: new URL(`../../assets/images/chart.jpeg`, import.meta.url).href,
          url: "http://10.1.122.163:10010/chat/QN018j2qlkTv7iXF",
        },
        {
          id: 3,
          name: "运营周报",
          description: "运营周报智能体可按照模板自动生成一周运营数据报告.",
          imgSrc: new URL(`../../assets/images/yyzb.png`, import.meta.url).href,
          url: "http://10.1.122.163:10010/chat/6HN3X0zWGMMumozd",
        },
        {
          id: 4,
          name: "智能问数",
          description: "智能问数智能体可根据用户问题，自动生成符合要求的答案.",
          imgSrc: new URL(`../../assets/images/znws.png`, import.meta.url).href,
          url: "http://10.1.122.163:10010/",
        },
      ],
    };
  },
  methods: {
    // 定义方法
    returnPage() {
      window.opener = null;
      window.open("about:blank", "_self").close();
      window.close();
      // if (window) {
      //   window.location.href = "about:blank";
      // }
    },
    jumpTo(item) {
      window.open(item.url);
    },
  },
  created() {
    // 在组件创建时执行的逻辑
  },
  mounted() {
    // 在组件挂载完成后执行的逻辑
  },
};
</script>

<style scoped lang="scss">
.list-container {
  margin: 0 auto;
  padding: 20px;

  height: calc(100% - 48px);
  width: 1000px;
  overflow: auto;
}

.list-items {
  margin-top: 20px;
  background-color: #f5f7f8;
  display: flex;
  flex-wrap: wrap;
  padding: 16px;

  border-radius: 12px;
  align-content: flex-start;
}

.list-item {
  margin: 16px 16px 24px;
  width: 270px;
  // height: 215px;
  padding: 16px 16px;
  cursor: pointer;

  background: #fff;
  border-radius: 4px;
  border: 1px solid #e8eaf2;
  transition: all 0.4s ease-in-out;

  &:hover {
    border: 1px solid #e0dfff;
    box-shadow: 0 12px 32px 0 rgba(44, 44, 54, 0.12);
    cursor: pointer;
    transform: translateY(-4px);
  }
  .item-content {
    display: flex;
    align-items: center;
  }
  .item-image {
    width: 100%;
    border-radius: 4px;
    margin-bottom: 8px;
    height: 160px;
  }
  .item-icon {
    width: 26px;
    height: 26px;
    margin-right: 8px;
    border: 1px solid #40befd8f;
    border-radius: 4px;
  }
  .item-name {
    font-size: 20px;
    font-weight: bold;
  }

  .item-description {
    font-size: 14px;
    color: #606266;
    margin-top: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    height: 80px;
  }
}
.header {
  width: 100%;
  height: 48px;
  line-height: 48px;
  font-size: 28px;
  background: #6dc3c8;
  color: white;
}
.title1 {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 16px;
  margin-top: 16px;
}
.return-btn {
  position: absolute;
  top: 7px;
  left: 12px;
  z-index: 100;
}
.jump-btn {
  width: 100%;
}
</style>
